<template>
	<view class="video-home">
		<!-- 背景图装饰层 -->
		<view class="bg-decoration"></view>
		
		<!-- 固定的视频头部区域，包含播放器和信息 -->
		<view class="video-header">
			<!-- 视频播放器 -->
			<view class="video-container">
				<video id="mainVideo" :src=videoUrl controls autoplay class="main-video" type="video/mp4"></video>
				<!-- 倍速设置按钮 -->
				<view class="speed-control">
					<button @click="showSpeedOptions = !showSpeedOptions" class="speed-btn">
						{{ currentSpeed }}x
					</button>
					<view v-if="showSpeedOptions" class="speed-options">
						<view v-for="speed in speedOptions" :key="speed" @click="setPlaybackSpeed(speed)"
							:class="['speed-option', currentSpeed === speed ? 'active' : '']">
							{{ speed }}x
						</view>
					</view>
				</view>
			</view>

			<!-- 视频信息 -->
			<view class="video-info">
				<text class="video-title">{{ currentVideoTitle || '精彩视频' }}</text>
				<text class="video-desc">点击下方视频列表切换播放内容</text>
			</view>
		</view>

		<!-- 视频列表 - 两列布局，只在自己区域内滚动 -->
			<view class="video-list">
				<scroll-view scroll-y class="scroll-view">
					<view class="video-grid">
						<view class="video-item" v-for="(item, index) in videoList" :key="index" @click="playVideo(item)"
							:class="videoUrl === item.url ? 'active' : ''">
							<view class="video-item-wrapper">
								<image :src="item.cover" mode="aspectFill"></image>
								<view class="video-item-overlay"></view>
								<view v-if="videoUrl === item.url" class="play-indicator">
									<text class="play-icon">▶</text>
								</view>
								<view class="video-duration" v-if="item.duration">{{ formatDuration(item.duration) }}</view>
							</view>
							<view class="video-item-info">
								<text class="video-item-title">{{ item.title }}</text>
								<view class="video-item-meta">
									<text class="video-item-author">{{ item.author || '未知作者' }}</text>
									<view class="video-item-stats">
										<text class="stat">👁 {{ formatNumber(item.views || 0) }}</text>
										<text class="stat">👍 {{ formatNumber(item.likes || 0) }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 加载更多 -->
					<view class="load-more" v-if="hasMore && videoList.length > 0">
						<view class="loading-spinner" v-if="loadingMore"></view>
						<text class="load-more-text" v-else @click="loadMoreVideos">上拉加载更多</text>
					</view>

					<!-- 到底提示 -->
					<view class="end-tip" v-if="!hasMore && videoList.length > 0">
						<text>已经到底啦</text>
					</view>

					<!-- 空状态 -->
					<view class="empty-state" v-else-if="!loading">
						<text class="empty-text">暂无视频</text>
						<text class="empty-subtext">快来上传您的第一个视频吧</text>
					</view>

					<!-- 加载状态 -->
					<view class="loading-state" v-if="loading">
						<view class="loading-spinner-large"></view>
						<text class="loading-text">加载中...</text>
					</view>
				</scroll-view>
			</view>
	</view>
</template>

<script>
import {
	getVideoList,
	recordWatchHistory
} from '@/utils/api'


export default {

	data() {
		return {
			videoList: [],
			videoContext: null,
			videoUrl: "http://vjs.zencdn.net/v/oceans.mp4",
			currentVideoTitle: '',
			loading: false,
			loadingMore: false,
			hasMore: true,
			currentPage: 1,
			pageSize: 10,
			total: 0,
			error: null,
			showSpeedOptions: false,
			speedOptions: [0.5,  1.0, 1.25, 1.5, 2.0],
			currentSpeed: 1.0
		}
	},
	onLoad() {
		this.fetchVideoList()
	},
	onReady() {
		this.videoContext = uni.createVideoContext('mainVideo')
	},
	onUnload() {
			clearTimeout(this.timer)
		},

		// 上拉加载更多
		onReachBottom() {
			if (!this.loadingMore && this.hasMore) {
				this.loadMoreVideos()
			}
		},
	methods: {
		async fetchVideoList() {
			this.loading = true
			this.error = null
			try {
				const res = await getVideoList({
					page: this.currentPage,
					pageSize: this.pageSize
				})

				this.videoList = res.list.map(video => ({
					id: video.ID,
					title: video.title,
					cover: video.cover_url || 'https://picsum.photos/300/200?random=' + video.ID,
					url: video.video_url,
					author: video.author || '未知作者',
					views: video.views || 0,
					likes: video.likes || 0,
					duration: video.duration || 0
				}))
				this.total = res.total || 0
				this.hasMore = this.videoList.length < this.total
				if (this.videoList.length > 0 && this.currentPage === 1) {
					this.playVideo(this.videoList[0])
				}
			} catch (err) {
				this.error = err.message || '获取视频列表失败'
				console.error('获取视频列表失败:', err)
			} finally {
				this.loading = false
			}
		},

		// 加载更多视频
		async loadMoreVideos() {
			if (this.loadingMore || !this.hasMore) {
				return
			}

			this.loadingMore = true
			try {
				const res = await getVideoList({
					page: this.currentPage + 1,
					pageSize: this.pageSize
				})

				const newVideos = res.list.map(video => ({
					id: video.ID,
					title: video.title,
					cover: video.cover_url || 'https://picsum.photos/300/200?random=' + video.ID,
					url: video.video_url,
					author: video.author || '未知作者',
					views: video.views || 0,
					likes: video.likes || 0,
					duration: video.duration || 0
				}))

				this.videoList = [...this.videoList, ...newVideos]
				this.currentPage++
				this.hasMore = this.videoList.length < (res.total || this.total)
			} catch (err) {
				console.error('加载更多视频失败:', err)
				uni.showToast({
					title: '加载更多失败',
					icon: 'none',
					duration: 2000
				})
			} finally {
				this.loadingMore = false
			}
		},
		playVideo(video) {
			if (!this.videoContext.paused) {
				this.videoContext.pause();
			}
			this.timer = setTimeout(() => {
				this.videoUrl = video.url
				this.currentVideoTitle = video.title
				this.videoContext.src = video.url
				this.videoContext.play()
				this.showSpeedOptions = false
			}, 500);
		},
		setPlaybackSpeed(speed) {
			//this.videoContext.src = this.videoUrl
			this.videoContext.play()
			this.videoContext.playbackRate(speed)
			this.showSpeedOptions = false
			this.currentSpeed = speed
		},
		
		// 格式化视频时长
		formatDuration(seconds) {
			const mins = Math.floor(seconds / 60)
			const secs = Math.floor(seconds % 60)
			return `${mins}:${secs < 10 ? '0' + secs : secs}`
		},
		
		// 格式化数字（如观看量、点赞数）
		formatNumber(num) {
			if (num >= 10000) {
				return (num / 10000).toFixed(1) + 'w'
			} else if (num >= 1000) {
				return (num / 1000).toFixed(1) + 'k'
			}
			return num.toString()
		}
	}
}
</script>

<style>
/* 主容器样式，设置背景图和固定高度 */
.video-home {
	padding: 20rpx;
	background: #121212;
	height: 100vh;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* 背景图装饰层 */
.bg-decoration {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background-image: url('~@/static/backgrounds/video-bg.svg');
	background-size: cover;
	background-position: center;
	opacity: 0.8;
}

/* 内容层，使其在背景之上 */
.video-header {
	position: relative;
	z-index: 1;
}

.video-container,
.video-info{
	position: relative;
	z-index: 1;
}

.video-container {
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
	position: relative;
	background-color: #000;
	border: 2rpx solid rgba(255, 255, 255, 0.1);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-container:active {
	transform: translateY(-2rpx);
	box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.4);
}

.main-video {
	width: 100%;
	height: 420rpx;
	object-fit: cover;
}

/* 倍速控制样式 */
.speed-control {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	z-index: 10;
}

.speed-btn {
	background-color: rgba(42, 82, 152, 0.8);
	color: #fff;
	border: 1rpx solid rgba(255, 255, 255, 0.2);
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	line-height: 1.4;
	transition: background-color 0.3s ease;
}

.speed-btn:active {
	background-color: rgba(66, 133, 244, 0.9);
}

.speed-options {
	position: absolute;
	top: 60rpx;
	right: 0;
	background-color: rgba(0, 0, 0, 0.8);
	border-radius: 10rpx;
	overflow: hidden;
}

.speed-option {
	color: #fff;
	padding: 15rpx 30rpx;
	font-size: 26rpx;
	text-align: center;
}

.speed-option.active {
	background-color: rgba(255, 255, 255, 0.2);
}

.video-info {
	margin: 30rpx 0;
	padding: 24rpx;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 16rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
}

.video-title {
	font-size: 36rpx;
	font-weight: bold;
	display: block;
	margin-bottom: 10rpx;
	color: #fff;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.video-desc {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.7);
}

/* 视频列表区域，固定在视频下方，只在自己区域内滚动 */
.video-list {
	flex: 1;
	position: relative;
	z-index: 1;
	overflow: hidden;
}

.scroll-view {
	height: 100%;
	display: flex;
	flex-direction: column;
}

/* 瀑布流布局 */
.video-grid {
	columns: 2;
	column-gap: 15rpx;
}

/* 视频项样式 */
.video-item {
	break-inside: avoid;
	margin-bottom: 20rpx;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	border: 1rpx solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
}

.video-item:active {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2rpx);
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
}

.video-item.active {
	border: 2rpx solid #07c160;
	background: rgba(7, 193, 96, 0.1);
}

/* 视频封面样式 */
.video-item-wrapper {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	overflow: hidden;
}

.video-item image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.video-item-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

/* 空状态样式 */
.empty-state {
	padding: 120rpx 40rpx;
	text-align: center;
}

.empty-text {
	font-size: 36rpx;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 10rpx;
	display: block;
}

.empty-subtext {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.5);
}

/* 加载状态样式 */
.loading-state {
	padding: 120rpx 40rpx;
	text-align: center;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid rgba(255, 255, 255, 0.2);
	border-top: 4rpx solid #07c160;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto;
}

.loading-spinner-large {
	width: 60rpx;
	height: 60rpx;
	border: 6rpx solid rgba(255, 255, 255, 0.2);
	border-top: 6rpx solid #07c160;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin: 0 auto 20rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.5);
}

/* 加载更多样式 */
.load-more {
	padding: 40rpx 0;
	text-align: center;
}

.load-more-text {
	font-size: 28rpx;
	color: #07c160;
}

/* 到底提示样式 */
.end-tip {
	padding: 40rpx 0;
	text-align: center;
}

.end-tip text {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.5);
}

/* 播放指示器 */
.play-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60rpx;
	height: 60rpx;
	background-color: rgba(0, 0, 0, 0.7);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon {
	color: #fff;
	font-size: 28rpx;
	margin-left: 3rpx;
}

/* 视频时长 */
.video-duration {
	position: absolute;
	right: 10rpx;
	bottom: 10rpx;
	background-color: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 20rpx;
	padding: 4rpx 10rpx;
	border-radius: 15rpx;
}

/* 视频信息 */
.video-item-info {
	padding: 15rpx;
}

/* 视频标题 */
.video-item-title {
	display: block;
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.4;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	margin-bottom: 8rpx;
}

/* 视频元数据 */
.video-item-meta {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 视频作者 */
.video-item-author {
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.6);
}

/* 视频统计信息 */
.video-item-stats {
	display: flex;
	gap: 15rpx;
}

/* 统计项 */
.stat {
	font-size: 20rpx;
	color: rgba(255, 255, 255, 0.5);
}
</style>